<!-- 水表配置 -->
<template>
	<el-drawer v-model="isShowDrawer" direction="rtl" :before-close="handleClose" :size="curDrawerSize" :close-on-click-modal="isReadOnly">
		<template #header="{ titleId, titleClass }">
			<div class="zs-drawer-header" :id="titleId" :class="titleClass">
				<i class="icon-b-item zs-icon zs-text-blue zs-space-right-sm"></i>
				<div class="zs-title zs-text-black">{{ handleType == "info" ? "查看" : "配置"}}</div>
			</div>
		</template>

		<template #default>
			<el-container class="zs-drawer-container">
				<el-scrollbar class="zs-drawer-content">
					<!-- card1 -->
					<div class="zs-align-center zs-space-bottom" id="sm-drawer-demo-card-01">
						<i class="icon-s-item zs-icon zs-text-blue zs-space-right-sm"></i>
						<div class="zs-title">设备信息</div>
					</div>
					<div class="zs-card zs-space-bottom">
						<HsForm :filed-list="materBaseEquipment" ref="equipmentForm" :isDisabled="isReadOnly"></HsForm>
					</div>
					<!-- card2 -->
					<div class="zs-align-center zs-space-bottom zs-space-top-lg" id="sm-drawer-demo-card-02">
						<i class="icon-s-item zs-icon zs-text-blue zs-space-right-sm"></i>
						<div class="zs-title">质保信息</div>
					</div>
					<div class="zs-card zs-space-bottom">
						<HsForm :filed-list="materBaseQuality" ref="qualityForm" :isDisabled="isReadOnly"></HsForm>
					</div>
					<!-- card3 -->
					<div class="zs-align-center zs-space-bottom zs-space-top-lg" id="sm-drawer-demo-card-03">
						<i class="icon-s-item zs-icon zs-text-blue zs-space-right-sm"></i>
						<div class="zs-title">寿命信息</div>
					</div>
					<div class="zs-card zs-space-bottom">
						<HsForm :filed-list="materBaseLife" ref="lifeForm" :isDisabled="isReadOnly"></HsForm>
					</div>
					<!-- card4 -->
					<div class="zs-align-center zs-space-bottom zs-space-top-lg" id="sm-drawer-demo-card-04">
						<i class="icon-s-item zs-icon zs-text-blue zs-space-right-sm"></i>
						<div class="zs-title">设备状态</div>
					</div>
					<div class="zs-card zs-space-bottom">
						<HsForm :filed-list="materBaseStatus" ref="statusForm" :isDisabled="isReadOnly"></HsForm>
					</div>
					<!-- card5 -->
					<div class="zs-align-center zs-space-bottom zs-space-top-lg" id="sm-drawer-demo-card-05">
						<i class="icon-s-item zs-icon zs-text-blue zs-space-right-sm"></i>
						<div class="zs-title">水表参数</div>
					</div>
					<div class="zs-card zs-space-bottom">
						<HsForm :filed-list="materBaseParams" ref="paramsForm" :isDisabled="isReadOnly" @selectChange="selectChange"></HsForm>
					</div>
				</el-scrollbar>
				<hsDocWrapper :nodeList="curNodeList" />
			</el-container>
		</template>

		<template v-if="handleType != 'info'" #footer>
			<div>
				<el-button class="zs-btn-md zs-btn-primary" @click="doConfirm">提交</el-button>
			</div>
		</template>
	</el-drawer>
</template>

<script setup>
	import HsForm from '@/components/hsForm.vue';
	import { materBaseEquipment, materBaseQuality, materBaseLife, materBaseStatus, materBaseParams } from '@/config/form/energy.js';
	import { waterMeterSettingInfoApi, waterMeterSettingApi, waterParentListApi } from '@/api/energy.js';
	import { ElMessage } from 'element-plus';
	import { ref, reactive, watch, nextTick, watchEffect } from 'vue';
	import { useStore } from 'vuex';
	import { useRoute } from 'vue-router';
	import { setFormSelectOptions } from '@/utils/formEvent';

	const props = defineProps({
		isShow: { type: Boolean, default: false },
		isReadOnly: { type: Boolean, default: true },
		handleType: { type: String, default: '' },
		currentRow: { type: Object },
		kindList: { type: Array },
		typeList: { type: Array },
	});
	const emit = defineEmits(['close']);
	const route = useRoute()
	const store = useStore();
	const curDrawerSize = ref(store.state.uiDrawerSize);
	const dictObj = store.getters.getDictObj(['BUILDING_LEVEL', 'PROPERTY_DEVICE_STATUS']);
	const curNodeList = ref([
		{ name: '设备信息', id: 'sm-drawer-demo-card-01' },
		{ name: '质保信息', id: 'sm-drawer-demo-card-02' },
		{ name: '寿命信息', id: 'sm-drawer-demo-card-03' },
		{ name: '设备状态', id: 'sm-drawer-demo-card-04' },
		{ name: '水表参数', id: 'sm-drawer-demo-card-05' },
	]);
	const equipmentForm = ref();
	const qualityForm = ref();
	const lifeForm = ref();
	const statusForm = ref();
	const paramsForm = ref();
	let isShowDrawer = ref(props.isShow);

	watch(
		() => props.isShow,
		(newVal, oldVal) => {
			isShowDrawer.value = newVal;
			if (newVal) {
				getInfo();
				getWaterParentList();
			}
		},
	);

	//初始化信息
	const getInfo = async () => {
		let res = await waterMeterSettingInfoApi(props.currentRow.deviceId);
		if (res.data.code != 200) return;
		let resData = Object.assign(res.data.data);
		initData(resData);
		console.log(resData)
		equipmentForm.value.setFiledVal(resData);
		qualityForm.value.setFiledVal(resData);
		lifeForm.value.setFiledVal(resData);
		statusForm.value.setFiledVal(resData);
		paramsForm.value.setFiledVal(resData);
		nextTick(() => {
			paramsForm.value.clearValidate(undefined, true);
		});
	};

	const initData = data => {
		data.deviceStatusDict = String(data.deviceStatusDict);
		data.effectState = diffDate(data.warrantyStartTime, data.warrantyEndTime, 'effectState');
		data.lifeEffectState = diffDate(data.lifeStartTime, data.lifeEndTime, 'lifeEffectState');
		data.multiplier = data.multiplier ? data.multiplier : 1;
	};

	//提交
	const doConfirm = async () => {
		let model = await paramsForm.value.validateForm();
		if (!model) return;
		model.waterMeterid = model.id;
		model.deviceId = props.currentRow.deviceId;
		model.projectCode = route.query.projectCode;
		let res = await waterMeterSettingApi(model);
		if (res.data.code == 200) {
			ElMessage({
				message: '提交成功',
				type: 'success',
			});
			isShowDrawer.value = false;
			emit('close', { isShow: false, isRefresh: true });
		}
	};

	//表单关联
	const selectChange = data => {
		// 所选父级传 deviceNum字段
		if (data.filedName == 'parentDeviceId') {
			let target = parentList.value.find(item => item.deviceId == data.filedVal)
			paramsForm.value.setFiledSource('parentDeviceNum', target.deviceNum);
		}
	};

	//关闭抽屉
	const handleClose = done => {
		emit('close', { isShow: false });
		done();
	};

	// 设置有效期
	const diffDate = (startDate, endDate, targetFiled) => {
		let nowTime = new Date().getTime();
		if (startDate <= nowTime && nowTime <= endDate) {
			return targetFiled == 'effectState' ? '质保期内' : '寿命期内';
		} else {
			return targetFiled == 'effectState' ? '质保期外' : '寿命期外';
		}
	};

	// 选择父级列表
	let parentList = ref([])
	const getWaterParentList = async () => {
		let res = await waterParentListApi({
			deviceId: props.currentRow.deviceId,
			projectCode: route.query.projectCode,
		});
		parentList.value = res.data.data || []
		setFormSelectOptions(materBaseParams, 'parentDeviceId', res.data.data || []);
	};

	setFormSelectOptions(materBaseEquipment, 'floorNum', dictObj.BUILDING_LEVEL);
	setFormSelectOptions(materBaseStatus, 'deviceStatusDict', dictObj.PROPERTY_DEVICE_STATUS);
	setFormSelectOptions(materBaseParams, 'waterMeterType', props.typeList);
	setFormSelectOptions(materBaseParams, 'waterMeterModel', props.kindList);
</script>
